import {designPage} from "plain-design-composition";
import {Tooltip} from "antd";
import {DemoRow} from "../../Demo/DemoRow";
import SearchOutlined from '@ant-design/icons/SearchOutlined';
import {Button} from "../../../../packages";
import React, {useState} from "react";

/*
const AntdButton: React.FC<{ children: RenderNode, onClick?: () => void }> = (props) => {
  console.log('ant button render', props.children);
  return (
    <button onClick={props.onClick}>antd:{props.children}</button>
  );
};

const EncapsulationButton = designComponent({
  emits: {
    onClick: () => true,
  },
  slots: ['default'],
  setup({ slots, event }) {
    return () => (
      <AntdButton onClick={event.emit.onClick}>
        encapsulation:{slots.default()}
      </AntdButton>
    );
  },
});

export const demo0 = () => {

  const [count, setCount] = useState(100);
  const [label, setLabel] = useState('hello');

  return (
    <p>
      <input type="text" value={label} onChange={e => setLabel(e.target.value)}/>
      <button onClick={() => setCount(val => val + 1)}>add:{count}</button>
      <AntdButton onClick={() => {console.log('基础 onClick');}}>{label}</AntdButton>
      <EncapsulationButton onClick={() => {console.log('封装 onClick');}}>{label}</EncapsulationButton>
    </p>
  );
};
*/

const _demo1 = designPage(() => {
  return () => (
    <DemoRow title="基本用法">
      <Button type="primary">Primary Button</Button>
    </DemoRow>
  );
});

export const demo1 = () => {
  const [Component, setComponent] = useState(() => _demo1);
  (demo1 as any).update = (newComponent: any) => setComponent(() => newComponent);
  return <Component/>;
};

export const demo2 = designPage(() => {
  return () => (
    <DemoRow title="按钮类型">
      <Button type="primary">Primary Button</Button>
      <Button>Default Button</Button>
      <Button type="dashed">Dashed Button</Button>
      <Button type="text">Text Button</Button>
      <Button type="link">Link Button</Button>
    </DemoRow>
  );
});

export const demo3 = designPage(() => {
  return () => (
    <DemoRow title="按钮图标">
      <p>
        <Tooltip title="search">
          <Button type="primary" shape="circle" icon={<SearchOutlined/>}/>
        </Tooltip>
        <Button type="primary" shape="circle">
          A
        </Button>
        <Button type="primary" icon={<SearchOutlined/>}>
          Search
        </Button>
        <Tooltip title="search">
          <Button shape="circle" icon={<SearchOutlined/>}/>
        </Tooltip>
        <Button icon={<SearchOutlined/>}>Search</Button>
      </p>
      <p>
        <Tooltip title="search">
          <Button shape="circle" icon={<SearchOutlined/>}/>
        </Tooltip>
        <Button icon={<SearchOutlined/>}>Search</Button>
        <Tooltip title="search">
          <Button type="dashed" shape="circle" icon={<SearchOutlined/>}/>
        </Tooltip>
        <Button type="dashed" icon={<SearchOutlined/>}>
          Search
        </Button>
        <Button icon={<SearchOutlined/>} href="https://www.google.com"/>
      </p>
    </DemoRow>
  );
});
